<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-03-10 19:13:13
 * @LastEditTime: 2024-03-18 15:25:44
 * @FilePath: \env-manager-pc\src\views\statistics\data_full\detail.vue
-->
<script setup lang="ts">
import dayjs from 'dayjs'
import statisticsApi from '@/api/modules/statistics'
import { usePage } from '@/utils/commonHook'
import useKeepAliveStore from '@/store/modules/keepAlive'

const keepAliveStore = useKeepAliveStore()

const route = useRoute()
const entData = reactive(sessionStorage.getItem('ent_data') ? JSON.parse(sessionStorage.getItem('ent_data') as string) : {},
)

const entId = route.params.id as string

const tableData = ref<any[]>([])
const { page, pageNumChange, pageSizeChange } = usePage(getTableData)

function search() {
  page.PageNum = 1
  getTableData()
}
const startTime = ref<string>(route.query.startTime as string || dayjs().format('YYYYMMDD'))
const endTime = ref<string>(route.query.endTime as string || dayjs().format('YYYYMMDD'))

const searchTime = computed({
  set: (value) => {
    const [start, end] = value
    startTime.value = start
    endTime.value = end
  },
  get: () => {
    return [startTime.value, endTime.value]
  },
})

const loading = ref(false)
async function getTableData() {
  loading.value = true
  const res = await statisticsApi.GetDeviceCollectRangeStat({
    objFilter: {
      Type: 'DIM.Business.DeviceFilters.EntObjIDFilter',
      Value: [entId],

    },
    pageSize: page.PageSize,
    pageNum: page.PageNum,
    startTime: startTime.value,
    endTime: dayjs(endTime.value).add(1, 'day').format('YYYYMMDD'),
  })
  loading.value = false
  const { Rows, RecordsetCount } = res as any
  tableData.value = Rows || []
  page.RecordsetCount = RecordsetCount
}

getTableData()

onBeforeRouteLeave((to) => {
  if (to.name !== 'statistics-data-full-list') {
    keepAliveStore.remove('StatisticsDataFullList')
  }
})
</script>

<template>
  <div>
    <PageHeader>
      <template #content>
        <ElForm label-width="80">
          <ElRow>
            <ElCol :span="6">
              <ElFormItem label="日期">
                <ElDatePicker v-model="searchTime" type="daterange" value-format="YYYYMMDD" placeholder="选择日期" :clearable="false" @change="search" />
              </ElFormItem>
            </ElCol>
            <el-tag v-if="entData.EntName" class="ml-10px" size="large" type="primary">
              企业：{{ entData.EntName }}
            </el-tag>
          </ElRow>
        </ElForm>
      </template>
    </PageHeader>
    <PageMain>
      <div v-auto-height="85">
        <vxe-table
          border
          header-align="center"
          height="100%"
          :data="tableData"
          :loading="loading"
          :row-config="{ isCurrent: true }"
        >
          <VxeColumn title="序号" type="seq" width="80" align="center" />
          <VxeColumn field="DevName" title="设备名称" min-width="150" />
          <VxeColumn field="OwnerOrgName" title="运维公司" width="150" />
          <VxeColumn field="CollectTarget" title="应采数据(点)" width="120" align="right" header-align="center" />
          <vxe-colgroup title="已采数据(点)">
            <VxeColumn field="CollectTS" title="数据" width="100" align="right" header-align="center" />
            <VxeColumn field="CollectPS" title="停电" width="100" align="right" header-align="center" />
            <VxeColumn field="CollectActual" title="合计" width="100" align="right" header-align="center" />
          </vxe-colgroup>
          <vxe-colgroup title="采集率(%)">
            <VxeColumn field="CollectTSRatio" title="数据" width="100" align="right" header-align="center" />
            <VxeColumn field="CollectPSRatio" title="停电" width="100" align="right" header-align="center" />
            <VxeColumn field="CollectActualRatio" title="合计" width="100" align="right" header-align="center" />
          </vxe-colgroup>
        </vxe-table>
      </div>
      <ElPagination
        class="mt-4"
        :page-size="page.PageSize"
        :total="page.RecordsetCount"
        :current-page="page.PageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        @current-change="pageNumChange"
        @size-change="pageSizeChange"
      />
    </PageMain>
  </div>
</template>
